<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的优惠券</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/noneuser.css">
    <script src="js/rem.js"></script>
</head>

<body>
    <div id="container">
        <header>
            <div class="header">
                <a href="usercenter.html"><img src="images/retrun.png" alt=""></a>
                <p>我的优惠券</p>
            </div>
        </header>
        <div class="options_items">
            <ul>
                <li class="active">未使用</li>
                <li>已使用</li>
                <li>已过期</li>
            </ul>
        </div>
        <div id="content" style="display: flex;">
            
            <div class="content_left">
                <div class="content_left_top">
                    <img src="images/quan.png" alt="">
                </div>
                <p class="content_left_bottom">面膜专场</p>
            </div>
            
            <p class="Vertical_bar"></p>
            
            <div class="content_mid">
                <div class="content_mid_top">
                    <img src="images/¥30.png" alt="">
                    <p class="p_three">满¥299可用</p>
                </div>
                <div class="content_mid_bottom">
                    <p class="pOne">面膜活动优惠券</p>
                    <p class="pTwo">有效期至2019.12.03</p>
                </div>
            </div>
            
            <a href="details.html"><div class="content_rigth defcolor">去使用</div></a>
        </div>
        <div id="content"  class="content">
            <!--  -->
            <div class="content_left">
                <div class="content_left_top">
                    <img src="images/gift.png" alt="">
                </div>
                <p class="content_left_bottom">新人专享</p>
            </div>
            <!--  -->
            <p class="Vertical_bar"></p>
            <!--  -->
            <div class="content_mid">
                <div class="content_mid_top">
                    <img src="images/¥50.png" alt="">
                    <p class="p_three changecolor">满¥199可用</p>
                </div>
                <div class="content_mid_bottom">
                    <p class="pOne">限新人专场可用</p>
                    <p class="pTwo">有效期至2019.12.03</p>
                </div>
            </div>
            <!--  -->
            <div class="content_rigth_two">
                <img src="images/use.png" alt="">
            </div>
        </div>
        <div id="content" class="content">
            <!--  -->
            <div class="content_left">
                <div class="content_left_top">
                    <img src="images/gift.png" alt="">
                </div>
                <p class="content_left_bottom">全场通用</p>
            </div>
            <!--  -->
            <p class="Vertical_bar"></p>
            <!--  -->
            <div class="content_mid">
                <div class="content_mid_top">
                    <img src="images/¥5.png" alt="" class="five">
                    <p class="p_three changecolor">0门槛可用</p>
                </div>
                <div class="content_mid_bottom">
                    <p class="pOne">全场商品通用券</p>
                    <p class="pTwo">有效期至2019.12.03</p>
                </div>
            </div>
            <!--  -->
            <div class="content_rigth_two">
                <img src="images/data.png" alt="">
            </div>
        </div>
</body>
<script src="./js/noneuser.js"></script>
</html>